<template>
  <div class='auth'>
    <div class="bg"></div>
    <div class="title-info">
      <img
        src="https://img.zcool.cn/community/01bdd755452b640000019ae9d70a4d.jpg@1280w_1l_2o_100sh.jpg"
        alt="">
      <h2 class="title">图书管理系统后台</h2>
    </div>
    <div class="form">
      <a-tabs>
        <a-tab-pane key="1" tab="登录">
          <div class="item">
            <a-input type="text" placeholder="请输入账号" size="large">
              <template #prefix>
                <UserOutlined />
              </template>
            </a-input>
          </div>
          <div class="item">
            <a-input type="password" placeholder="请输入密码" size="large">
              <template #prefix>
                <LockOutlined />
              </template>
            </a-input>
          </div>
          <div class="item">
            <a href="">忘记密码</a>
          </div>
          <div class="item">
            <a-button type="primary" size="large">登录</a-button>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="注册">
          <div class="item">
            <a-input type="text" placeholder="请输入账号" size="large">
              <template #prefix>
                <UserOutlined />
              </template>
            </a-input>
          </div>
          <div class="item">
            <a-input type="password" placeholder="请输入密码" size="large">
              <template #prefix>
                <LockOutlined />
              </template>
            </a-input>
          </div>
          <div class="item">
            <a-input type="text" placeholder="请输入邀请码" size="large">
              <template #prefix>
                <MailOutlined />
              </template>
            </a-input>
          </div>
          <div class="item">
            <a-button type="primary" size="large">注册</a-button>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script src="./index.js"></script>
<style lang="scss" scoped>
  @import './index.scss'

</style>
